<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <heading grade="1">发起赛事</heading>
            <el-row>
                <el-col :span="8" v-for="item in matchList" :key="item">
                    <a class="sport-item" v-bind:href="'#/race/release/'+item.en">
                        <x-img v-bind:src="item.imgUrl" alt="" />
                        <div class="m_name">{{item.name}}</div>
                    </a>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default{
    computed: {
      ...mapGetters({
        global: 'global'
      })
    },
    data () {
      return {
        matchList: [
          {
            imgUrl: '/static/images/type/football.png',
            name: '足球',
            en: 'football'
          },
          {
            imgUrl: '/static/images/type/basketball.png',
            name: '篮球',
            en: 'basketball'
          },
          {
            imgUrl: '/static/images/type/badminton.png',
            name: '羽毛球',
            en: 'badminton'
          },
          {
            imgUrl: '/static/images/type/tennis.png',
            name: '网球',
            en: 'tennis'
          },
          {
            imgUrl: '/static/images/type/pingpang.png',
            name: '乒乓球',
            en: 'pingpang'
          },
          {
            imgUrl: '/static/images/type/run.png',
            name: '跑步',
            en: 'run'
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

    .sport-item {
        text-align: center;
        width: 100%;
        display: block;
    }

    .m_name {
        padding: 25px 0;
    }
</style>
